GreenSock

Hi @pedrobear. There's a lot of very custom logic in that CodePen demo, and it's well beyond the scope of help we can provide for free in these forums, but if you'd like to isolate a very specific problem in a much simpler version, we'd be happy to take a peek and help with any GSAP-specific questions. It looks likely to me that the snap-back with the arrow functionality has to do with logic flaws in where you're animating to (calculations). As for being sluggish, there are a lot of factors with that (performance is a very deep topic), but one possibility is that browsers have rendering engines that are optimized for vertical scrolling, not as much horizontal scrolling, so you may be hitting some browser-specific optimization limitations. For example, I know that if you have elements that go beyond a certain width, the browser forces it to get broken into multiple tiles for the graphics renderer, and switching between them can be a little expensive. None of that has anything to do with GSAP. Good luck!

I read your description a few times and I still have no idea what you're asking, sorry. Maybe I'm just too sleep-deprived and someone else may understand, but I'm totally lost.

Are you looking for something like this?: https://codepen.io/GreenSock/pen/PovPzpv?editors=0010

Are you saying you still need help to figure out that error or are you saying you're all good now?

If I understand your goal correctly, you can just use ScrollSmoother's paused() method: https://codepen.io/GreenSock/pen/vYwNNdP?editors=0010

I read your post several times and I don't understand what you're asking, sorry. I'm not sure what you're trying to do. You seem to have .info-content-right stuff that has a width of 100% which ends up being 0 (check dev tools), so none of it would be visible anyway. I'm just completely lost about what you're trying to do, sorry. 🤷‍♂️

Yeah, it's just a logic issue in your code: // bad .to(item, { background: "#ed3c3c",boxShadow:'0 0 16px #ed3c3c' }, 0.5 * i) // good .to(item, { background: "#ed3c3c",boxShadow:'0 0 16px #ed3c3c' }, 0.5 * (i-1)) You were running that logic on only the 2nd item and after. Thus everything starts at 0.5 seconds into the timeline. https://codepen.io/GreenSock/pen/PovweLe?editors=0010

You had various syntax problems and logic problems in your code. Plus you weren't loading or registering ScrollTrigger. Is this what you're looking for?: https://codepen.io/GreenSock/pen/jOoExGv?editors=1010

Yeah, that doesn't look like it's GSAP-related at all. GSAP seems to be doing its job, but from what I can tell, you've got some other library or logic that's implementing a fake scrollbar and it's not getting updated properly when the window is scrolled to the appropriate position. I'd recommend looking at that library to figure out what it's doing (or not doing). Maybe there's some kind of update method you need to call from within an onUpdate on the scrollTo tween to get it to update that fake scrollbar to the correct position. We can't really do much if you don't provide a minimal demo (like a CodePen or Stackblitz) or if it's not a GSAP-related issue. Hopefully this gets you going in the right direction though. Good luck!

Welcome to the forums, @Sandy Choudhary You should never animate the same element that you're pinning. Instead, just create a wrapper element that you pin instead: https://codepen.io/GreenSock/pen/JjqjQMV Is that what you're looking for?

Does it solve it for you if you set immediateRender: false on the ScrollTrigger?: https://stackblitz.com/edit/stackblitz-starters-vynow2?file=src%2Fcomponents%2FHeroIntro%2FHeroIntro.js,src%2Fservices%2Fgsap.js

Hi @WEB1995. That's actually a super complex thing to try to do because you've got some wild variation in the direction and pacing of the line. At some points the line is going UP...but you're scrolling DOWN. And sometimes it's going directly horizontal (so no vertical movement at all), while the page is scrolling down. So logically, it's literally impossible to have it "centered" the whole time (if the page is moving down and the line is moving up, see the problem?). You can sort of approximate things with the magic of that pathEase() helper, but it'll never be perfect: https://codepen.io/GreenSock/pen/BaeaZqd?editors=1010 The only way to have it perfectly centered is to take an entirely different approach, like by putting everything in a container that you then translate it dynamically to keep it centered. That's not a super simple thing either, and it's well beyond the kind of help we can provide for free in these forums, but you can contact us for paid consulting services. I hope that helps!

That's just a CSS issue. There are many ways to set it up. Here are two: https://codepen.io/GreenSock/pen/rNgNwjr https://codepen.io/GreenSock/pen/zYQYzKm

There were quite a few problems with the logic in that demo. Lots of extra code too. Is this more like what you're trying to do?: https://stackblitz.com/edit/stackblitz-starters-bj9hsn?file=app%2Fpage.tsx

No, sorry.